<template>
  <!-- 题目编辑器 -->
  <div class="editor-container">
    <toolbar :editor="editorRef" :default-config="toolbarConfig" mode="simple" style="border-bottom: 1px solid #ccc" />
    <editor :default-config="editorConfig" :model-value="props.modelValue" style="height: 50px" @on-change="handleChange" @on-created="handleCreated" />
  </div>
  <selector-material v-if="imageVisible" :title="'选择图片'" :material-type="4" :multiple="true" :visible="imageVisible" @close="handleImageCallback" />
  <formula-form v-if="formula.visible" :value="formula.value" :insert="formula.insert" :visible="formula.visible" @close="handleFormulaCallback" />
</template>

<script setup>
  import '@wangeditor/editor/dist/css/style.css'
  import { onUnmounted, reactive, ref, shallowRef } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { MenusForQuestion } from './index.js'
  import { registerMenu } from '@/components/Editor/module/module.js'
  import SelectorMaterial from '@/components/Selector/Material/index.vue'
  import FormulaForm from '@/components/Editor/module/plugin/formula/FormulaForm.vue'
  import { DomEditor, SlateTransforms } from '@wangeditor/editor'

  const props = defineProps({
    modelValue: {
      type: String,
      default: ''
    }
  })

  const toolbarConfig = ref({
    toolbarKeys: ['fullScreen']
  })
  const editorConfig = ref({})

  const editorRef = shallowRef()
  const handleCreated = (editor) => {
    editorRef.value = editor
    registerMenu(editorRef.value, toolbarConfig.value, MenusForQuestion)
    initMenuEvent(editor)
  }

  const imageVisible = ref(false)
  const formula = reactive({
    visible: false,
    value: '',
    insert: true // 默认为插入，false为更新
  })
  const initMenuEvent = (editor) => {
    editor.on('ImageMenuClick', () => {
      imageVisible.value = true
    })
    editor.on('FormulaMenuClick', (val) => {
      if (val) {
        formula.insert = false
        formula.value = val
      } else {
        formula.insert = true
        formula.value = ''
      }
      formula.visible = true
    })
  }
  const handleImageCallback = (val) => {
    imageVisible.value = false
    if (val) {
      const editor = editorRef.value
      val.forEach((item) => {
        editor.insertNode({ type: 'image', src: item.materialUrl, children: [{ text: '' }] })
      })
    }
  }
  const handleFormulaCallback = (val) => {
    const editor = editorRef.value
    formula.visible = false
    if (!val) {
      return
    }
    if (val.insert) {
      // 插入
      editor.insertNode({ type: 'formula', value: val.value, children: [{ text: '' }] })
    } else {
      // 更新
      editor.restoreSelection() // 还原选区
      const path = DomEditor.findPath(editor, DomEditor.getSelectedNodeByType(editor, 'formula'))
      SlateTransforms.setNodes(editor, { value: val.value }, { at: path })
    }
  }

  const emit = defineEmits(['update:modelValue'])
  const handleChange = (editor) => {
    //console.log(editor.getHtml())
    emit('update:modelValue', editor.getHtml())
  }

  onUnmounted(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
</script>
